<template>
  <div :style="styleObject" v-show="show" @click="hide">
    <div :style="imgStyle" @click.stop>
      <img :src="src" style="max-width:100%;" @load="load">
      <a class="panel-tool-close" :style="closeStyle" @click="hide">
        <i class="el-icon-error" style="background-color: white;"></i>
      </a>
    </div>
  </div>
</template>

<script>
  import { Observer } from '../core/util'
  export default {
    created: function () {
        var self = this;
        Observer.register('showImage', function (src) {
            self.show = true;
            self.src = src;
            self.imgStyle = {};
            self.closeStyle = {};
        });
    },
    data: function () {
        return {
            styleObject: {
                position: 'absolute',
                zIndex: '99999',
                width: '100%',
                height: '100%',
                top: '0px',
                background: 'rgba(255, 255, 255, 0.3)',
            },
            imgStyle: {},
            closeStyle: {},
            src: '',
            show: false
        }
    },
    methods: {
        hide: function () {
            this.show = false;
            this.src = '';
        },
        load: function (e) {
            var imgWidth = e.target.width,
                imgHeight = e.target.height,
                screenWidth = document.body.clientWidth,
                screenHeight = document.body.clientHeight;
            if (imgHeight > screenHeight) {
                var precent = screenHeight / imgHeight;
                imgHeight = screenHeight;
                imgWidth = imgWidth * precent;
            }
            this.imgStyle = {
                'background-color': 'white',
                'position': 'absolute',
                'left': '50%',
                'top': '50%',
                'width': imgWidth + 'px',
                'height': imgHeight + 'px',
                'margin-left': -imgWidth / 2 + 'px',
                'margin-top': -imgHeight / 2 + 'px'
            };
            this.closeStyle = {
                'position': 'fixed',
                'top': (screenHeight - imgHeight) / 2 + 'px',
                'right': (screenWidth - imgWidth) / 2 + 'px',
                'height': '16px',
                'width': '16px'
            };
        }
    }
  }
</script>